<template>
  <div>
    <div id="home">
      <div class="operator_head">
        <div
          id="header"
          class="operatorHeader clearfix"
          style="background: gray"
        >
          <div class="w15 fl text-center">
            <div class="logo"></div>
          </div>
          <div class="w70 fl text-left">
            <h3 class="m120px">摄影小程序后台管理</h3>
          </div>
          <div class="w15 fl text-right">
            <div class="userInfo">
              <div class="userAvatar"></div>
              <div class="userName">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    {{ userInfo.username
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>

                  <el-dropdown-menu
                    slot="dropdown"
                    style="width: 150px; text-align: center"
                  >
                    <el-dropdown-item icon="el-icon-s-custom"
                      >首页门户</el-dropdown-item
                    >
                    <el-dropdown-item icon="el-icon-switch-button"
                      ><span @click="logout">退出登录</span></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>

              <div class="skinPeeler">
               
                 <el-dropdown trigger="click">
                    <i class="skinLogo"></i>
                  <span class="el-dropdown-link">
                  <i class="el-icon--right"></i>
                  </span>
                  <el-dropdown-menu
                    slot="dropdown"
                    style="width: 150px; text-align: center"
                  >
                    <el-dropdown-item 
                      >默认色</el-dropdown-item
                    >
                    <el-dropdown-item 
                      ><span>天空蓝</span></el-dropdown-item
                    >
                      <el-dropdown-item 
                      ><span>纯黑色</span></el-dropdown-item
                    >
                      <el-dropdown-item
                      ><span>土豪金</span></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <!-- <ul class="skinPeelerList">
                  <li class="skinPeelerItem">
                    <span>默认主题</span>
                  </li>
                  <li class="skinPeelerItem">
                    <span>默认主题</span>
                  </li>
                  <li class="skinPeelerItem">
                    <span>默认主题</span>
                  </li>
                </ul> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加轮播图对话框 -->
    <el-dialog
      style="text-align:left;"
      title="添加轮播图"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="图片" style="margin-bottom:20px">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="addCarouselList"
            :auto-upload="false"
            :on-change="uploadchange"
            list-type="picture"
          >
            <el-button style="width:80px;height:30px" type="primary"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item style="margin-bottom:20px" label="标题">
          <el-input v-model="title" clearable></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label="描述">
          <el-input type="textarea" v-model="description"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="mun"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button style="width:60px;height:30px" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button
          style="width:60px;height:30px"
          type="primary"
          @click="addCarousel"
          >确 定</el-button
        >
      </span>
    </el-dialog>

     <!-- 添加轮主题/服务单对话框 -->
    <el-dialog
      style="text-align:left;"
      title="添加轮主题/服务单"
      :visible.sync="addThemeDialog"
      width="35%"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="图片" style="margin-bottom:20px">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            
            :file-list="addThemesList"
            :auto-upload="false"
            :on-change="addThemeschange"
            list-type="picture"
          >
            <el-button style="width:80px;height:30px" type="primary"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item style="margin-bottom:20px" label="标题">
          <el-input v-model="addThemes.title" clearable></el-input>
        </el-form-item>
         <el-form-item style="margin-bottom:20px" label="副标题">
          <el-input v-model="addThemes.description" clearable></el-input>
        </el-form-item>

        <div style="display:flex">
         <el-form-item label="价格" style="margin-bottom:20px;width:47%;flex;1">
          <el-input-number
            v-model="addThemes.price"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
          
        
         <el-form-item label="名额" style="margin-bottom:20px">
          <el-input-number
            v-model="addThemes.total"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
         </div>

         <div style="display:flex">
         <el-form-item label="系列" style="margin-bottom:20px">
           <el-select
            v-model="addThemes.series"
            style="margin-right:-30px"
            filterable
            placeholder="请选择"
          >
            <el-option
              style="padding-left:20px"
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类型" style="margin-bottom:20px">
           <el-select
            v-model="addThemes.type"
            filterable
            placeholder="请选择"
          >
            <el-option
              style="padding-left:20px"
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        </div>
        
        <el-form-item style="margin-bottom:20px" label="详情" >
          <el-input type="textarea" v-model="addThemes.detail"></el-input>
        </el-form-item>

        <el-form-item style="margin-bottom:20px" label="联系电话">
          <el-input v-model="addThemes.phone" clearable></el-input>
        </el-form-item>
      
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button style="width:60px;height:30px" @click="addThemeDialog = false"
          >取 消</el-button
        >
        <el-button
          style="width:60px;height:30px"
          type="primary"
          @click="themesAdd"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 添加环境展示对话框 -->
    <el-dialog
      style="text-align:left;"
      title="添加环境展示"
      :visible.sync="displayDialogVisible"
      width="30%"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="图片" style="margin-bottom:20px">
          <el-upload
            class="upload-demo"
            action="none"
           
            :file-list="addDisplayList"
            :auto-upload="false"
            :on-change="displaychange"
            list-type="picture"
          >
            <el-button style="width:80px;height:30px;" type="primary"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item style="margin-bottom:20px" label="标题">
          <el-input v-model="displayAdd.displayTitle" clearable></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label="描述">
          <el-input
            type="textarea"
            v-model="displayAdd.displayCripition"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="displayAdd.displaySort"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          style="width:60px;height:30px"
          @click="displayDialogVisible = false"
          >取 消</el-button
        >
        <el-button
          style="width:60px;height:30px"
          type="primary"
          @click="addDisplay"
          >确 定</el-button
        >
      </span>
    </el-dialog>

      <!-- 修改主题/服务单对话框 -->
    <el-dialog
      style="text-align:left;"
      title="修改主题/服务单"
      :visible.sync="updateThemeDialog"
      width="35%"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="图片" style="margin-bottom:20px">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="fileListThemes"
            :auto-upload="false"
            :on-change="getUpdateThemeslFile"
            list-type="picture"
          >
            <el-button style="width:80px;height:30px" type="primary"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item style="margin-bottom:20px" label="标题">
          <el-input v-model="editThemes.title" clearable></el-input>
        </el-form-item>
         <el-form-item style="margin-bottom:20px" label="副标题">
          <el-input v-model="editThemes.description" clearable></el-input>
        </el-form-item>

        <div style="display:flex">
         <el-form-item label="价格" style="margin-bottom:20px;width:47%;flex:1">
          <el-input-number
            v-model="editThemes.price"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>

         <el-form-item label="名额" style="margin-bottom:20px;">
          <el-input-number
            v-model="editThemes.total"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        </div>

        <div style="display:flex;">
         <el-form-item label="系列" style="margin-bottom:20px;">
           <el-select
            v-model="editThemes.series"
            style="margin-right:-30px"
            filterable
            placeholder="请选择"
          >
            <el-option
              style="padding-left:20px"
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类型" style="margin-bottom:20px;">
           <el-select
            v-model="editThemes.type"
            filterable
            placeholder="请选择"
          >
            <el-option
              style="padding-left:20px"
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        </div>
         

        <el-form-item style="margin-bottom:20px" label="详情" >
          <el-input type="textarea" v-model="editThemes.detail"></el-input>
        </el-form-item>

        <el-form-item style="margin-bottom:20px" label="联系电话">
          <el-input v-model="editThemes.phone" clearable></el-input>
        </el-form-item>
      
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button style="width:60px;height:30px" @click="updateThemeDialog = false"
          >取 消</el-button
        >
        <el-button
          style="width:60px;height:30px"
          type="primary"
          @click="themesUpdate"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 修改轮播图对话框 -->
    <el-dialog
      style="text-align:left;"
      title="修改轮播图"
      :visible.sync="updateDialogVisible"
      width="30%"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="图片" style="margin-bottom:20px">
          <el-upload
            class="upload-demo"
            action="none"
            :file-list="fileList"
            :auto-upload="false"
            :on-change="getUpdateCarouselFile"
            list-type="picture"
          >
            <el-button style="width:80px;height:30px" type="primary"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item style="margin-bottom:20px" label="标题">
          <el-input v-model="editData.title" clearable></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label="描述">
          <el-input type="textarea" v-model="editData.description"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="editData.sort"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          style="width:60px;height:30px"
          @click="updateDialogVisible = false"
          >取 消</el-button
        >
        <el-button
          style="width:60px;height:30px"
          type="primary"
          @click="editCarousel"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 修改环境展示对话框 -->
    <el-dialog
      style="text-align:left;"
      title="修改环境展示"
      :visible.sync="updateDisplayDialogVisible"
      width="30%"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="图片" style="margin-bottom:20px">
          <el-upload
            class="upload-demo"
            action="none"
            :file-list="fileListDisplay"
            :auto-upload="false"
            :on-change="getUpdateDisplaylFile"
            list-type="picture"
          >
            <el-button style="width:80px;height:30px" type="primary"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item style="margin-bottom:20px" label="标题">
          <el-input v-model="editDisplay.title" clearable></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label="描述">
          <el-input
            type="textarea"
            v-model="editDisplay.description"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="editDisplay.sort"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          style="width:60px;height:30px"
          @click="updateDisplayDialogVisible = false"
          >取 消</el-button
        >
        <el-button
          style="width:60px;height:30px"
          type="primary"
          @click="editDisplayById"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 侧边栏 -->
    <el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="handleClick"  style="margin: 120px 0 0 30px">
      
         
      <el-tab-pane name ="first" label="首页内容">
        <el-tabs type="card">
          <el-tab-pane label="轮播图">
            <el-button
              class="fl"
              style="height: 40px; width: 80px;"
              type="primary"
              @click="dialogVisible = true"
              >添加</el-button
            >

            <el-table
              :data="tableData"
              :cell-style="rowClass"
              :header-cell-style="headClass"
              style="width:100%; border:1px solid #e6e6e6"
            >
              <el-table-column type="index" label="序号"> </el-table-column>
              <el-table-column prop="filename" label="图片">
                <template slot-scope="scope">
                  <el-image
                    style="width: 180px; height: 150px"
                    :src="'http://localhost:3000/api' + scope.row.path"
                     :preview-src-list="srcList"
                    @click="getPath(scope.row.path)"
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题"> </el-table-column>
              <el-table-column prop="description" label="描述">
              </el-table-column>
              <el-table-column prop="sort" label="排序"> </el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button
                    style="width:60px;height:30px"
                    type="primary"
                    @click="updateCarousel(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    style="width:60px;height:30px"
                    type="danger"
                    @click="removeCarousel(scope.row.id)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="环境展示">
            <el-button
              class="fl"
              style="height: 40px; width: 80px;"
              type="primary"
              @click="displayDialogVisible = true"
              >添加</el-button
            >
            <el-table
              :data="displayData"
              :cell-style="rowClass"
              :header-cell-style="headClass"
              style="width:100%; border:1px solid #e6e6e6"
            >
              <el-table-column type="index" label="序号">
              </el-table-column>
              <el-table-column  prop="filename" label="图片">
                <template slot-scope="scope">
                  <el-image
                    style="width: 180px; height: 150px"
                    :src="'http://localhost:3000/api' + scope.row.path"
                     :preview-src-list="srcList"
                    @click="getPath(scope.row.path)"
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题"> </el-table-column>
              <el-table-column prop="description" label="描述">
              </el-table-column>
              <el-table-column prop="sort" label="排序"> </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    style="width:60px;height:30px"
                    type="primary"
                    @click="updateDisplay(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    style="width:60px;height:30px"
                    type="danger"
                    @click="removeDisplay(scope.row.id)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
       
      <el-tab-pane name ="second" label="订单管理">
        <div style="display:flex;margin-bottom:20px;">
          <el-input
            style="width: 300px; margin-right:10px"
            placeholder="请输入标题"
            prefix-icon="el-icon-search"
            v-model="themes.themesQuery"
            clearable
          >
          </el-input>

          <el-select
            v-model="themes.series"
            style="margin-right:10px;"
            filterable
            placeholder="请选择"
          >
            <el-option
              style="padding-left:20px"
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="themes.type"
            style="margin-right:10px"
            filterable
            placeholder="请选择"
          >
            <el-option
              style="padding-left:20px"
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="themes.isRecommentd"
            filterable
            placeholder="请选择"
          >
            <el-option
              style="padding-left:20px"
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-button
            style="height: 40px; width: 80px; margin-left: 20px"
            type="primary"
            icon="el-icon-search"
            @click="searchThemes"
            >搜索</el-button
          >
          <el-button
            style="height: 40px; width: 80px; "
            type="primary"
            plain
            icon="el-icon-delete"
            @click="clearThemes"
            >清空</el-button
          >
          <div style="flex:1">
            <el-button
              style="height: 40px; width: 80px;margin-right:-120px"
              type="primary"
               @click="addThemeDialog = true"
              >添加</el-button
            >
          </div>
        </div>
        <el-table
          :data="themesData"
          style="width: 100%"
          :cell-style="rowClass"
          :header-cell-style="headClass"
        >
          <el-table-column  type="index" label="序号"> </el-table-column>
          <el-table-column  prop="filename" label="图片">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="'http://localhost:3000/api' + scope.row.path"
                :preview-src-list="srcList"
                 @click="getPath(scope.row.path)"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="themeNo" label="单号" width="200">
          </el-table-column>
          <el-table-column prop="title" label="标题"> </el-table-column>
          <el-table-column prop="description" label="副标题"> </el-table-column>
          <el-table-column prop="price" label="价格"> </el-table-column>
          <el-table-column prop="total" label="名额"> </el-table-column>
          <el-table-column prop="series" label="系列">
            <template slot-scope="scope">
              {{
                
                scope.row.series == 1
                  ? "礼服"
                  : scope.row.series == 2
                  ? "妆容"
                  : "摄影"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型">
            <template slot-scope="scope">
              {{
                scope.row.type == 1
                  ? "主题拍摄"
                  : scope.row.type == 2
                  ? "婚纱定制"
                  : "婚礼定制"
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            :formatter="dateFormat"
            label="创建时间"
            width="150"
          >
          </el-table-column>
          <el-table-column  label="操作" width="250">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isRecommend == false||scope.row.isRecommend ==null" @click="updateRecommend(scope.row.id,scope.row.index)" style="width:80px;height:30px" type="primary">
                今日推荐
              </el-button>
                <el-button plain v-if="scope.row.isRecommend == true" @click="cancelRecommend(scope.row.id,scope.row.index)" style="width:80px;height:30px" type="primary">
                取消推荐
              </el-button>
              <el-button style="width:60px;height:30px" type="primary" @click="updateThemes(scope.row)">
                编辑
              </el-button>

              <el-button
                style="width:60px;height:30px"
                type="danger"
                @click="removeTheme(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 订单管理的分页器 -->
        <div class="text-right mt20px">
          <div class="block">
            <el-pagination
              @size-change="themeSizeChange"
              @current-change="themeCurrentChange"
              :current-page="themes.themesCurrentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="themes.themesPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="themes.total"
            >
            </el-pagination>
          </div>
          
        </div>
        
      </el-tab-pane>
      <el-tab-pane name ="third" label="客户预约">暂无</el-tab-pane>
      <el-tab-pane name ="fourth"  label="用户管理">
        <div class="fl">
          <el-input
            style="width: 300px"
            placeholder="请输入手机号或姓名"
            prefix-icon="el-icon-search"
            v-model="queryList.query"
            clearable
          >
          </el-input>
          <el-button
            style="height: 40px; width: 80px; margin-left: 15px"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >搜索</el-button
          >
          <el-button
            style="height: 40px; width: 80px"
            type="primary"
            plain
            icon="el-icon-delete"
            @click="userClear"
            >清空</el-button
          >
        </div>
        <el-table
          :data="userList"
          :cell-style="rowClass"
          :header-cell-style="headClass"
          style="width:100%; border:1px solid #e6e6e6"
        >
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="chineseName" label="姓名"> </el-table-column>
          <el-table-column prop="username" label="手机号"> </el-table-column>
          <el-table-column prop="identity" label="身份">
            <template slot-scope="scope">
              {{ scope.row.identity == 1 ? "管理员" : "普通用户" }}
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column
            prop="createTime"
            :formatter="dateFormat"
            label="注册日期"
          >
          </el-table-column>
        </el-table>

        <!-- 用户列表的分页器 -->
        <div class="text-right mt20px">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryList.currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="queryList.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
     activeName:'first',
      file: "",
      title: "",
      description: "",
      sort: 0,
      mun: 0,
      srcList:[""],
      addCarouselList:[],
      addDisplayList:[],
      addThemesList:[],
      userInfo: [], //获取登录用户信息
      userList: [], //获取用户列表信息
      tableData: [],//显示轮播图信息
      displayData: [], //显示环境展示信息
      editData: [], //编辑轮播图
      editDisplay: [], //编辑环境显示
      editThemes: [], //编辑主题/服务单
      fileDisplay: "",
      fileThemes:"",
      fileListDisplay: [{ name: "", url: "" }],//获取修改环境展示的图片名字和路径
      fileList: [{ name: "", url: "" }],//获取修改轮播图的图片名字和路径
      fileListThemes: [{ name: "", url: "" }],//获取修改主题/服务单的图片名字和路径
      total: 0,
      //添加环境展示
      displayAdd: {
        displayType: "",
        displayFile: "",
        displayTitle: "",
        displayCripition: "",
        displaySort: "",
        displayNum: ""
      },
      //获取用户列表所需参数
      queryList: {
        pageSize: 3, //每页数据
        currentPage: 1, //当前页数
        query: ""
      },
      //显示服务单/主题数据
      themesData:[],
      //获取服务单/主题所需参数
      themes: 
        {
          themesCurrentPage: 1,
          themesPageSize: 3,
          themesQuery: "",
          series: "",
          type: "",
          isRecommentd: null,
          total: 0
        },
        //添加主题
        addThemes:{
          series:"",
          type:"",
          file:"",
          title:"",
          phone:"",
          description:"",
          deatail:"",
          price:"",
          total:""
        },
      
      tabPosition: "left",
      dialogVisible: false, //添加轮播图
      updateDialogVisible: false, //修改轮播图
      displayDialogVisible: false, //添加环境展示
      updateDisplayDialogVisible: false, //修改环境展示
      addThemeDialog:false,//添加主题
      updateThemeDialog:false,//修改主题
      // id: "", //数据的id
      count: 1,
      // tableData2: [{}],
      //系列
      options1: [
        // {
        //   value: "0",
        //   label: "全部"
        // },
        {
          value: "1",
          label: "礼服"
        },
        {
          value: "2",
          label: "妆容"
        },
        {
          value: "3",
          label: "摄影"
        }
      ],
      //类型
      options2: [
        // {
        //   value: "0",
        //   label: "全部"
        // },
        {
          value: "1",
          label: "主题拍摄"
        },
        {
          value: "2",
          label: "婚纱定制"
        },
        {
          value: "3",
          label: "婚礼定制"
        }
      ],
      //是否为今日推荐
      options3: [
        {
          value: "",
          label: "全部"
        },
        {
          value: true,
          label: "今日推荐"
        }
      ]
    };
  },
  methods: {
    //点击图片获取大图
    getPath(path) {
      this.srcList.push("http://localhost:3000/api" + path);
      this.srcList.splice(0, 1);
    },
    // 表头样式设置
    headClass() {
      return "text-align: center;background:#eef1f6;color:#606266";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    //页面刷新时保持当前选项卡的标签页
     handleClick(tab, event) {
      // 点击tab后触发事件，修改显示页面，将状态保存在sessionStorage里面
       sessionStorage.setItem('currentTab', tab.name)
      },
    //退出登录，清除token
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/Login").catch(() => {}); //抛出异常，不影响操作
    },
    //搜索用户
    search() {
      this.getUserList();
      
    },
    //清空用户搜索记录
    userClear() {
      this.queryList.query = "";
      this.getUserList();
    },
    //改变用户列表每页显示条数
    handleSizeChange(val) {
      // console.log(val);
      this.queryList.pageSize = val;
      this.getUserList();
    },
    //改变主题列表每页显示条数
    themeSizeChange(val) {
      // console.log(val);
      this.themes.themesPageSize = val;
      console.log(this.themes.themesPageSize);
      this.getThemes();
    },
    //改变主题列表当前页码
    themeCurrentChange(val) {
      // console.log(val);
      this.themes.themesCurrentPage = val;
      console.log(this.themes.themesCurrentPage);
      this.getThemes();
    },
    //改变用户列表当前页码
    handleCurrentChange(val) {
      // console.log(val);
      this.queryList.currentPage = val;
      this.getUserList();
    },
    //获得添加的轮播图片
    uploadchange(response, file, fileList) {
      // console.log(file,"我执行了");
      this.file = file[0].raw;
    },
    //获得添加的环境展示的图片
    displaychange(response, file, fileList) {
      // console.log(file,"我执行了");
      this.displayAdd.displayFile = file[0].raw;
    },
    //获得添加的主题/服务单的图片
   addThemeschange(response, file, fileList) {
      // console.log(file,"我执行了");
      this.addThemes.file = file[0].raw;
    },
    //添加主题/服务单
    themesAdd(){
      let data  = new FormData();
      data.append("series",this.addThemes.series);
      data.append("type",this.addThemes.type);
      data.append("file", this.addThemes.file);
      data.append("title",this.addThemes.title);
      data.append("phone",this.addThemes.phone);
      data.append("description",this.addThemes.description);
      data.append("detail",this.addThemes.detail);
      data.append("price",this.addThemes.price);
      data.append("total",this.addThemes.total);
      console.log(this.addThemes.file,'5555555')
      this.axios({
        url:"http://localhost:3000/api/Themes/addTheme?access_token=" +
          window.sessionStorage.getItem("token"),
          method:"post",
          data:data
      }).then(res=>{
        // console.log(res.data)
        if (res.data.code == 0) {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          //关闭对话框
          this.addThemeDialog = false;
          this.getThemes();
           this.clearAddThemes();
        } else {
          this.$message.error("添加失败");
        }
      })

    },
    //添加环境展示
    addDisplay() {
      let data = new FormData();
      data.append("type", 2);
      data.append("file", this.displayAdd.displayFile);
      data.append("title", this.displayAdd.displayTitle);
      data.append("description", this.displayAdd.displayCripition);
      data.append("sort", this.displayAdd.displaySort);
      data.append("num", this.displayAdd.displayNum);
      console.log(this.displayAdd.displayFile);
      this.axios({
        url:
          "http://localhost:3000/api/Carousels/addCarousel?access_token=" +
          window.sessionStorage.getItem("token"),
        method: "post",
        data: data
      }).then(res => {
        console.log(res.data.code);
        if (res.data.code == 0) {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          //关闭对话框
          this.displayDialogVisible = false;
          this.getDisplay();
           this.displayClear();
        } else {
          this.$message.error("添加失败");
        }
      });
    },

    //添加轮播图
    addCarousel() {
      // console.log(this.form.file);
      let data = new FormData();
      data.append("type", 1);
      data.append("file", this.file);
      data.append("title", this.title);
      data.append("description", this.description);
      data.append("sort", this.mun);
      console.log(this.file);
      this.axios({
        url:
          "http://localhost:3000/api/Carousels/addCarousel?access_token=" +
          window.sessionStorage.getItem("token"),
        method: "post",
        data: data
      }).then(({ data: res }) => {
        console.log(res);
        if (res.code == 0) {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          //关闭对话框
          this.dialogVisible = false;
          this.getCarousel();
          this.emptyCarousel();
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    //获取轮播列表数据
    getCarousel() {
      this.axios({
        url:
          "http://localhost:3000/api/Carousels/getCarousel?access_token=" +
          window.sessionStorage.getItem("token"),
        method: "post",
        data: {
          type: 1
        }
      }).then(res => {
        // console.log(res);
        this.tableData = res.data.data;
      });
    },

    //获得修改轮播图的图片文件
    getUpdateCarouselFile(file, fileList) {
      this.file = file.raw;
    },
    //获得修改环境展示的图片文件
    getUpdateDisplaylFile(file, fileList) {
      this.fileDisplay = file.raw;
      // console.log(this.fileDisplay);
    },
     //获得修改主题/服务单的图片文件
    getUpdateThemeslFile(file, fileList) {
      this.fileThemes = file.raw;
      // console.log(this.fileThemes ,"111");
    },
    // 修改主题/服务单，从后端获取未修改的图片名字和路径显示到对话框
    updateThemes(row) {
      this.updateThemeDialog = true;
      this.editThemes = row;
      this.fileListThemes[0].name = row.filename;
      this.fileListThemes[0].url = "http://localhost:3000/api" + row.path;
      // console.log(row);
    },

    

    // 修改轮播图
    updateCarousel(row) {
      this.updateDialogVisible = true;
      this.editData = row;
      this.fileList[0].name = row.filename;
      this.fileList[0].url = "http://localhost:3000/api" + row.path;
      console.log(row);
    },
    // 修改环境展示
    updateDisplay(row) {
      this.updateDisplayDialogVisible = true;
      this.editDisplay = row;
      this.fileListDisplay[0].name = row.filename;
      this.fileListDisplay[0].url = "http://localhost:3000/api" + row.path;
      console.log(row);
    },
     //修改主题/服务单的编辑对话框的确定按钮
    themesUpdate(){
      let data  = new FormData();
      data.append("id", this.editThemes.id);
      data.append("series",this.editThemes.series);
      data.append("type",this.editThemes.type);
      data.append("file",this.fileThemes);
      data.append("title",this.editThemes.title);
      data.append("phone",this.editThemes.phone);
      data.append("description",this.editThemes.description);
      data.append("detail",this.editThemes.detail);
      data.append("price",this.editThemes.price);
      data.append("total",this.editThemes.total);
      console.log(this.fileThemes,'5555555')
      this.axios({
        url:"http://localhost:3000/api/Themes/updateTheme?access_token=" +
          window.sessionStorage.getItem("token"),
          method:"post",
          data:data
      }).then(res=>{
        console.log(res.data)
        if (res.data.code == 0) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          //关闭对话框
          this.updateThemeDialog = false;
          this.getThemes();
           this.clearAddThemes();
        } else {
          this.$message.error("修改失败");
        }
      })

    },

    //修改环境展示的编辑对话框的确定按钮
    editDisplayById() {
      let data = new FormData();
      data.append("id", this.editDisplay.id);
      data.append("type", 2);
      data.append("file", this.fileDisplay);
      data.append("title", this.editDisplay.title);
      data.append("description", this.editDisplay.description);
      data.append("sort", this.editDisplay.sort);
      console.log(this.fileDisplay, "已执行");
      this.axios({
        method: "post",
        url:
          "http://localhost:3000/api/Carousels/updateCarousel?access_token=" +
          window.sessionStorage.getItem("token"),
        data: data
      }).then(res => {
        console.log(res.data.code);
        if (res.data.code == 0) {
          this.$message({
            message: "修改成功！",
            type: "success"
          });
          this.updateDisplayDialogVisible = false;
          this.getDisplay();
          this.displayClear();
        } else {
          this.$message.error("修改失败!");
        }
      });
    },
    // 修改轮播图对话框的确定按钮
    editCarousel() {
      let data = new FormData();
      data.append("id", this.editData.id);
      data.append("type", 1);
      data.append("file", this.file);
      data.append("title", this.editData.title);
      data.append("description", this.editData.description);
      data.append("sort", this.editData.sort);
      this.axios({
        method: "post",
        url:
          "http://localhost:3000/api/Carousels/updateCarousel?access_token=" +
          window.sessionStorage.getItem("token"),
        data: data
      }).then(({ data: res }) => {
        // console.log(res.code);
        if (res.code == 0) {
          this.$message({
            message: "修改成功！",
            type: "success"
          });
          this.updateDialogVisible = false;
          this.getCarousel();
          this.emptyCarousel();
        } else {
          this.$message.error("修改失败!");
        }
      });
    },

    //删除轮播图
    removeCarousel(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.axios({
          url:
            "http://localhost:3000/api/Carousels/removeCarousel?access_token=" +
            window.sessionStorage.getItem("token"),
          method: "post",
          data: {
            id: id,
            token: window.sessionStorage.getItem("token")
          }
        }).then(res => {
          // console.log(res.data.code)
          if (res.data.code == 0) {
            this.$message({
              message: "删除成功！",
              type: "success"
            });
            this.getCarousel();
          } else {
            this.$message.error("删除失败！");
          }
        });
      });
    },
    //清空添加轮播图对话框的信息
    emptyCarousel() {
      this.title = "";
      this.type = "";
      this.sort = 0;
      this.description = "";
      this.file ="";
      this.addCarouselList=[];
      this.fileList=[{ name: "", url: "" }]
     
    },
    //清空环境展示信息对话框的信息
    displayClear() {
      this.displayAdd.displayTitle = "";
      this.displayAdd.displayType = "";
      this.displayAdd.displaySort =0;
      this.displayAdd.displayCripition = "";
      this.displayAdd.displayFile = "";
       this.fileListDisplay=[{ name: "", url: "" }]
      this.addDisplayList=[];
    },
    //获取环境展示信息
    getDisplay() {
      this.axios({
        url:
          "http://localhost:3000/api/Carousels/getCarousel?access_token=" +
          window.sessionStorage.getItem("token"),
        method: "post",
        data: {
          type: 2
        }
      }).then(res => {
        // console.log(res)
        this.displayData = res.data.data;
      });
    },
    //删除展示信息
    removeDisplay(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.axios({
          url:
            "http://localhost:3000/api/Carousels/removeCarousel?access_token=" +
            window.sessionStorage.getItem("token"),
          method: "post",
          data: {
            id: id,
            token: window.sessionStorage.getItem("token")
          }
        }).then(res => {
          console.log(res.data);
          if (res.data.code == 0) {
            this.$message({
              message: "删除成功！",
              type: "success"
            });
            this.getDisplay();
          } else {
            this.$message.err("删除失败！");
          }
        });
      });
    },
    //获取登录用户信息
    getUserByToken() {
      this.axios({
        url:
          "http://localhost:3000/api/UserInformations/getUserInfoByToken?access_token=" +
          window.sessionStorage.getItem("token"),
        method: "post"
      }).then(({ data: res }) => {
        this.userInfo = res.data;
        // console.log(res);
      });
    },
    //获取用户列表
    getUserList() {
      this.axios
        .post(
          "http://localhost:3000/api/UserInformations/getUsers?access_token=" +
            window.sessionStorage.getItem("token"),
          this.queryList
        )
        .then(({ data: res }) => {
          // console.log(res.result);
          this.userList = res.result;
          this.total = res.count;
          this.queryList.currentPage=1;
          // this.createTime = moment(res.result.createTime).format("YYYY-MM-DD");
        });
    },
    // 获取主题/服务单列表数据
    getThemes() {
      this.axios
        .post(
          "http://localhost:3000/api/Themes/getThemes?access_token=" +
            window.sessionStorage.getItem("token"),
          {
            currentPage: this.themes.themesCurrentPage,
            pageSize: this.themes.themesPageSize,
            query:this.themes.themesQuery,
            series:this.themes.series,
            type:this.themes.type,
            isRecommend:this.themes.isRecommentd
          }
        )
        .then(res => {
          console.log(res.data.count);
         this.themesData=res.data.data;
          this.themes.total = res.data.count;
        });
    },
    //搜索主题/服务单列表数据,按标题模糊搜索关键字
      searchThemes() {
      this.axios
        .post(
          "http://localhost:3000/api/Themes/getThemes?access_token=" +
            window.sessionStorage.getItem("token"),
          {
            currentPage: 1,
            pageSize: this.themes.themesPageSize,
            query:this.themes.themesQuery,
            series:this.themes.series,
            type:this.themes.type,
            isRecommend:this.themes.isRecommentd
          }
        )
        .then(res => {
          // console(res.data.data)
         this.themesData=res.data.data;
         this.themes.total = res.data.count;
         console.log(this.themesData)
         this.themes.themesCurrentPage=1;
        });
    },
    //清空主题添加对话框
    clearAddThemes(){
      this.addThemes.series="";
      this.addThemes.type="";
      this.addThemes.file="";
      this.addThemes.title="";
      this.addThemes.phone="";
      this.addThemes.description="";
      this.addThemes.detail="";
      this.addThemes.price=0;
      this.addThemes.total=0;
       this.addThemesList=[];
      this.fileListThemes=[{name:"",url:""}]
    },
    //删除主题/服务单列表数据
    removeTheme(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.axios({
          url:
            "http://localhost:3000/api/Themes/removeTheme?access_token=" +
            window.sessionStorage.getItem("token"),
          method: "post",
          data: {
            id: id,
            token: window.sessionStorage.getItem("token")
          }
        }).then(res => {
          console.log(res);
          if (res.data.code == 0) {
            this.$message({
              message: "删除成功！",
              type: "success"
            });
            this.getThemes();
          } else {
            this.$message.err("删除失败！");
          }
        });
      });
    },
     //今日推荐
    updateRecommend(id,index) {
      this.axios({
        url:
          "http://localhost:3000/api/Themes/updateRecommend?access_token=" +
          window.sessionStorage.getItem("token"),
        method: "post",
        data: {
          id: id,
          isRecommend: true
        }
      }).then(res => {
        this.getThemes();
        this.$message({
          message: "今日推荐设置成功！",
          type: "success"
        });
      });
    },
     //取消今日推荐
   cancelRecommend(id,index) {
      this.axios({
        url:
          "http://localhost:3000/api/Themes/updateRecommend?access_token=" +
          window.sessionStorage.getItem("token"),
        method: "post",
        data: {
          id: id,
          isRecommend: false
        }
      }).then(res => {
        this.getThemes();
        this.$message({
          message: "取消今日推荐设置成功！",
          type: "success"
        });
      });
    },
   
   
    //清空的主题/服务单列表数据的搜索记录
    clearThemes() {
      this.themes.themesQuery= "";
      this.themes.series= "";
      this.themes.type="";
      this.themes.isRecommentd= null;
      this.getThemes();
    },
    // 格式化时间
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date === undefined) {
        return "";
      }
      var moment = require("moment");
      return moment(date).format("YYYY-MM-DD");
    }
  },
    // init(){
    //     this.activeName=JSON.parse(localStorage.getItem("keepAlive"));
    //   },
    //   handleClick(val){
    //     let dicts=val;
    //      localStorage.setItem("keepAlive",JSON.stringify(dicts));
    //   },

  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getUserList();
    this.getUserByToken();
    this.getCarousel();
    this.getThemes();
    this.getDisplay();
    // this.init();

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    let name = sessionStorage.getItem('currentTab') 
     // 判断是否存在currentTab，即tab页之前是否被点击切换到别的页面
     if(name){
       this.activeName = name
      }
    },
    beforeRouteLeave(to, from, next){
      // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
      // 根据个人需求决定清除的时间
       sessionStorage.removeItem('currentTab')
       next()
    }
    
   
};
</script>

<style scoped>
@import "homePage.css";
</style>
